<template>
  <div class="Monitor">
    <a-card
      shadow="always"
      class="mt15 elCard"
      v-for="(item, index) in dataList"
      :key="index"
    >
      <div class="areaTit">
        <div class="container">
          <span class="verticalText">{{ item.provName }}</span>
        </div>
      </div>
      <a-row :gutter="25" class="elRow">
        <a-col
          :span="4"
          v-for="(imgItem, imgIndex) in item.data"
          :key="imgIndex"
          class="imgBox"
          @click="jumpToMonitor(imgItem)"
        >
          <Image :url="imgItem.imageUrl" />
          <div class="stationName">{{ imgItem.stationName }}</div>
        </a-col>
      </a-row>
    </a-card>
    <a-empty v-if="!dataList.length" style="opacity: 0.5; margin-top: 50px" />
  </div>
</template>
<script setup>
;
import { MONITOR_TAB_ENUM } from "@/constants/stationConfig";
import Image from "./Image.vue";

const instance = getCurrentInstance();
const $api = inject("$api");

const router = useRouter();
const route = useRoute();
const dataList = ref([]);
const getCameraImages = async () => {
  const res = await $api.getCameraImages();
  if (res?.data && res.data.length > 0) {
    dataList.value = res.data;
  } else {
    // message.error('萤石云监控服务抓拍系统维护中，请稍后重试');
  }
};

const jumpToMonitor = async (data) => {
  router.push({
    path: "/MonitoringCenter/MonitorStaion",
    query: {
      stationId: data.stationId,
      pageType: MONITOR_TAB_ENUM.Monitoring, // 跳到实时监控
    },
  });
};

onMounted(async () => {
  getCameraImages();
});
</script>

<style lang="less" scoped>
::v-deep(.ant-card-body) {
  padding: 10px 20px;
}
.elCard {
  position: relative;
}
.imgBox {
  margin: 10px 0;
  position: relative;
  cursor: pointer;
  .stationName {
    position: absolute;
    width: calc(100% - 25px);
    bottom: 0;
    left: 12.5px;
    height: 30px;
    line-height: 30px;
    background: #000000ba;
    font-size: 14px;
    padding-left: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.areaTit {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 14px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: 10px;
}
.verticalText {
  writing-mode: vertical-rl;
  text-align: center;
  letter-spacing: 15px;
  font-weight: bold;
  font-size: 22px;
  padding-top: 15px;
}
.elRow {
  padding-left: 50px;
}
.ant-card {
  &:last-child {
    margin-bottom: 20px;
  }
}
</style>
